
<!DOCTYPE html>

<html class="no-js no-scroll" lang="">
	
	<head>
		
		<title>Player</title>
		
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		
		<meta name="description" content=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>

		<meta name="navbar-bg-color" content="#e5508c"/>
		<meta name="navbar-tint-color" content="white"/>
		<meta name="navbar-text-color" content="white"/>

		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/main.css"/>

	</head>
	
	<body>
		
		<RefreshCollectionView  id="list" name="player" class="list" columns="3" is-vertical>
			
			<UICollectionViewCell name="author" is-static is-row>
				<div class="author-wrapper">
					<img class="author-avatar" name="avatar"/>
					<div class="author-name" name="name">Vadim Sherbakov</div>
					<div class="author-location" name="location">San Francisco, CA</div>
				</div>
			</UICollectionViewCell>

			<UICollectionViewCell name="profile" is-static is-row>
				<div class="profile-wrapper">
					<div class="profile-attribution">
						<div class="profile-segment">
							<div class="segment-wrapper">
								<!-- <img class="segment-icon" src="icon-views.png"/> -->
								<span class="segment-count" name="followers">10,875</span>
								<span class="segment-suffix">Followers</span>
							</div>
						</div>
						<div class="profile-segment">
							<div class="segment-wrapper">
								<!-- <img class="segment-icon" src="icon-views.png"/> -->
								<span class="segment-count" name="followings">199</span>
								<span class="segment-suffix">Followers</span>
							</div>
						</div>
					</div>
				</div>
			</UICollectionViewCell>

			<UICollectionViewCell name="contact" is-static is-row>
				<div class="contact-wrapper">
					<div class="contact">
						<span class="contact-type">Twitter</span>
						<span class="contact-addr" name="twitter">hthorleifsson</span>
						<!-- <img class="contact-icon" src="icon-views.png"/> -->
					</div>
					<div class="contact">
						<span class="contact-type">Website</span>
						<span class="contact-addr" name="website">http://www.hthorleifsson.com</span>
						<!-- <img class="contact-icon" src="icon-views.png"/> -->
					</div>
					<div class="contact">
						<span class="contact-type">Dribbble</span>
						<span class="contact-addr" name="dribbble">hthorleifsson</span>
						<!-- <img class="contact-icon" src="icon-views.png"/> -->
					</div>
				</div>
			</UICollectionViewCell>

			<UICollectionViewCell name="shots" is-column>
				<img name="shot-url" class="shot-img" onclick="@selector(viewShot:)"/>
			</UICollectionViewCell>

		</RefreshCollectionView>
		
		<style>
			
			body {
				width: 100%;
				height: 100%;
				background-color: #e5508c;
			}

			.list {
				display: block;
				width: 100%;
				height: 100%;
				inset-left: 2px;
				inset-right: 2px;
			}

			.author-wrapper {
				display: block;
				width: 100%;
				height: 170px;
				border-width: 1px;
				border-color: transparent;
				border-style: solid;
			}
			
			.author-avatar {
				display: block;
				margin-top: 30px;
				margin-left: auto;
				margin-right: auto;
				width: 64px;
				height: 64px;
				border-radius: 34px;
				border-width: 2px;
				border-color: white;
				border-style: solid;
				background-color: #999;
			}
		
			.author-name {
				display: block;
				margin-top: 10px;
				margin-left: auto;
				margin-right: auto;
				width: 100%;
				height: 22px;
				line-height: 22px;
				color: #fff;
				text-align: center;
				font-size: 16px;
				font-weight: lighter;
			}

			.author-location {
				display: block;
				margin-top: 2px;
				margin-left: auto;
				margin-right: auto;
				width: 100%;
				height: 18px;
				line-height: 18px;
				color: white;
				text-align: center;
				font-size: 13px;
				font-weight: bold;
			}
		
			.profile-wrapper {
				width: 100%;
				height: auto;
				margin-bottom: 0.5px;
			}

			.profile-attribution {
				width: 100%;
				height: 44px;
				background-color: #e34383;
			}

			.profile-segment {
				display: block;
				float: left;
				width: 50.0%;
				height: 100%;
				text-align: center;
			}
		
			.segment-wrapper {
				width: auto;
				height: 100%;
			}

			.segment-icon {
				display: inline-block;
				width: 24px;
				height: 100%;
				content-mode: center;
			}

			.segment-count {
				display: inline-block;
				margin-left: 2px;
				width: auto;
				height: 100%;
				line-height: 44px;
				color: #eee;
				text-align: center;
				font-size: 15px;
				font-weight: bold;
			}
			
			.segment-suffix {
				display: inline-block;
				margin-left: 4px;
				width: auto;
				height: 100%;
				line-height: 44px;
				color: white;
				text-align: center;
				font-size: 12px;
				font-weight: lighter;
			}
		
			.contact-wrapper {
				width: 100%;
				height: auto;
			}

			.contact {
				width: 100%;
				height: 34px;
				background-color: #e34383;
			}
		
			.contact-type {
				float: left;
				display: block;
				width: 20%;
				height: 100%;
				line-height: 34px;
				color: white;
				text-align: right;
				font-size: 13px;
				font-weight: normal;
			}

			.contact-addr {
				float: left;
				display: block;
				padding-left: 10px;
				width: 70%;
				height: 100%;
				line-height: 34px;
				color: #f8fbff;
				text-align: left;
				font-size: 13px;
				font-weight: normal;
			}
		
			.contact-icon {
				float: right;
				margin-right: 6px;
				width: 34px;
				height: 100%;
				line-height: 34px;
				content-mode: center;
			}

			.shot-img {
				width: 100%;
				height: equals(width);
				content-mode: fill;
				margin: 2px;
				background-color: #eee;
				border-radius: 2px;
				border-color: white;
				border-style: solid;
			}

		</style>
		
	</body>
	
</html>
